<template>
  <a-layout class="chat-container">
    <!-- 聊天区域 -->
    <a-layout-content class="chat-content">
      <div class="message-list" ref="messageListRef">
        <div v-for="(msg, index) in messages" :key="index" class="message-item animate-slideIn">
          <!-- AI 消息 -->
          <a-comment v-if="msg.isAI" class="ai-message">
            <template #avatar>
              <a-avatar
                :size="48"
                shape="circle"
                class="relative z-10 hover:scale-105 transition-transform duration-300"
              >
                <span
                  class="absolute -bottom-1 -right-1 w-3 h-3 bg-green-500 rounded-full border-2 border-white"
                />
              </a-avatar>
            </template>
            <template #content>
              <div class="message-bubble ai rounded-2xl p-4 shadow-lg">
                {{ msg.content }}
              </div>
            </template>
          </a-comment>

          <!-- 用户消息 -->
          <a-comment v-else class="user-message">
            <template #avatar>
              <a-avatar
                :size="48"
                shape="circle"
                class="relative z-10 hover:scale-105 transition-transform duration-300"
              >
                <span
                  class="absolute -bottom-1 -right-1 w-3 h-3 bg-blue-500 rounded-full border-2 border-white"
                />
              </a-avatar>
            </template>
            <template #content>
              <div class="message-bubble user rounded-2xl p-4 shadow-lg">
                {{ msg.content }}
              </div>
            </template>
          </a-comment>
        </div>
      </div>
    </a-layout-content>

    <!-- 输入区域 -->
    <a-layout-footer class="input-area">
      <div class="action-buttons flex gap-2 mb-3">
        <a-button
          type="primary"
          :disabled="isGameStarted"
          @click="handleStart"
          class="bg-gradient-to-r from-indigo-500 to-indigo-600 hover:from-indigo-600 hover:to-indigo-700 transform hover:-translate-y-1 hover:shadow-lg transition-all duration-300"
        >
          开始
        </a-button>
        <a-button
          danger
          :disabled="isGameEnded"
          @click="handleEnd"
          class="bg-gradient-to-r from-red-500 to-red-600 hover:from-red-600 hover:to-red-700 transform hover:-translate-y-1 hover:shadow-lg transition-all duration-300"
        >
          结束
        </a-button>
      </div>
      <a-input-group compact>
        <a-input
          v-model:value="inputMessage"
          placeholder="输入你的问题..."
          @pressEnter="sendMessage"
          class="focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 transition-all duration-300 rounded-2xl"
        />
        <a-button
          type="primary"
          @click="sendMessage"
          class="bg-indigo-500 hover:bg-indigo-600 transform hover:-translate-y-1 hover:shadow-md transition-all duration-300 rounded-2xl"
        >
          发送
        </a-button>
      </a-input-group>
    </a-layout-footer>
  </a-layout>
</template>

<script setup>
import { ref, computed, onMounted, nextTick } from 'vue'
import { useRoute } from 'vue-router'
import axios from 'axios'

const route = useRoute()
const roomId = ref(route.params.roomId)
const messages = ref([])
const inputMessage = ref('')
const messageListRef = ref(null)
const isGameStarted = ref(false)
const isGameEnded = ref(false)

// 自动滚动到底部
const scrollToBottom = () => {
  nextTick(() => {
    if (messageListRef.value) {
      messageListRef.value.scrollTop = messageListRef.value.scrollHeight
    }
  })
}

// 发送消息
const sendMessage = async () => {
  if (!inputMessage.value.trim()) return

  try {
    // 用户消息
    messages.value.push({
      content: inputMessage.value,
      isAI: false,
    })

    // AI 回复
    const response = await axios.post(`http://localhost:8123/api/AI/interact`, null, {
      params: { userInput: inputMessage.value, sessionId: 1 },
    })

    messages.value.push({
      content: response.data,
      isAI: true,
    })

    // 检查游戏结束
    if (response.data.includes('对话已结束')) {
      isGameEnded.value = true
    }

    inputMessage.value = ''
    scrollToBottom()
  } catch (error) {
    console.error('发送消息失败:', error)
  }
}

// 处理开始游戏
const handleStart = async () => {
  isGameStarted.value = true
  await sendMessage()
}

// 处理结束游戏
const handleEnd = () => {
  isGameEnded.value = true
  messages.value.push({
    content: '对话已结束',
    isAI: true,
  })
}
</script>

<style scoped>
:root {
  --primary-color: #6366f1;
  --secondary-color: #f3f4f6;
  --user-bubble: linear-gradient(135deg, var(--primary-color), #4f46e5);
  --ai-bubble: linear-gradient(135deg, #f9fafb, #f3f4f6);
}

.chat-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f1f5f9;
}

.chat-content {
  flex: 0.8;
  padding: 32px 24px 24px 24px;
  overflow: hidden;
  position: relative;
}

.message-list {
  height: 100%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-right: 8px;
}

.message-item {
  max-width: 80%;
  animation-fill-mode: both;
}

.ai-message {
  display: flex;
  justify-content: flex-start;
  padding-left: 16px; /* 左侧间距 */
}

.user-message {
  display: flex;
  justify-content: flex-end;
  padding-right: 16px; /* 右侧间距 */
}

a-avatar {
  margin: 0 8px;
}

.message-bubble {
  max-width: 70%;
  padding: 16px 20px;
  border-radius: 24px;
  word-break: break-word;
  position: relative;
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.ai .message-bubble {
  background: var(--ai-bubble);
  border: 1px solid #e5e7eb;
  color: #111827;
}

.user .message-bubble {
  background: var(--user-bubble);
  color: white;
}

.user .message-bubble::after {
  content: '';
  position: absolute;
  right: -12px;
  bottom: 10px;
  width: 0;
  height: 0;
  border: 12px solid transparent;
  border-left-color: var(--primary-color);
}

.ai .message-bubble::after {
  content: '';
  position: absolute;
  left: -12px;
  bottom: 10px;
  width: 0;
  height: 0;
  border: 12px solid transparent;
  border-right-color: #e5e7eb;
}

/* 输入区优化 */
.input-area {
  padding: 24px 32px;
  background: #fff;
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.08);
  border-top: 1px solid #e5e7eb;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: all 0.3s ease;
}

.input-area:hover {
  box-shadow: 0 -6px 16px rgba(0, 0, 0, 0.12);
}

.action-buttons {
  display: flex;
  gap: 12px;
}

a-input-group {
  display: flex;
  gap: 12px;
}

a-input {
  height: 48px;
  font-size: 16px;
  border-radius: 24px !important;
  padding-left: 16px;
}

a-button {
  height: 48px;
  font-size: 16px;
  padding: 0 24px;
  border-radius: 24px !important;
}

/* 动画定义 */
@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-slideIn {
  animation: slideIn 0.4s ease-out forwards;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .chat-content {
    padding: 16px;
  }

  .message-item {
    max-width: 90%;
  }

  .message-bubble {
    max-width: 85%; /* 原来是 70%，现在放宽 */
    padding: 16px 20px;
    border-radius: 24px;
    word-break: break-word;
    white-space: pre-wrap; /* 支持换行和空格 */
    position: relative;
    box-shadow:
      0 4px 6px -1px rgba(0, 0, 0, 0.1),
      0 2px 4px -1px rgba(0, 0, 0, 0.06);
  }

  .input-area {
    padding: 16px;
  }

  a-input {
    height: 42px;
    font-size: 14px;
  }

  a-button {
    height: 42px;
    font-size: 14px;
    padding: 0 18px;
  }
}
</style>
